<template>
  <div style="margin-bottom: 20px;">
    <el-dialog :title="makeBrandTitle + edit_main_title" append-to-body v-dialogDrag :visible.sync="edit_flag"
               width="900px"  @open="handleOpenConfig" :before-close="handleClose">
      <!--供应商-->
      <el-form label-width="110px" ref="makeBrandEditFrom" class="mb20"
               :rules="makeBrandEditRules" :model="makeBrandData" :disabled="editMakeDisabled">
        <el-row>
          <el-col :span="8">
            <el-form-item label="供应商编号" prop="no">
              <el-input type="text" :disabled="makeInputDisabled" clearable v-model="makeBrandData.no" class="w184"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商名称" prop="name">
              <el-input type="text" clearable v-model="makeBrandData.name" class="w184"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--品牌商 table-->
      <div class="mb20" v-if="brandTableFlag">
        <div class="edit-table-header pad-t-b10">
          <span>品牌商数据</span>
          <!--<el-button type="primary" class="edit-add-position" :disabled="addBtnDisabled"  @click="addFlag=true,addClick()">新增</el-button>-->
        </div>
        <table class="add-edit-table">
          <!--表头-->
          <tr class="pad-t-b7">
            <th width="40">序号</th>
            <th width="">品牌商编号</th>
            <th width="">品牌商名称</th>
            <th width="">状态</th>
            <th width="300">操作</th>
          </tr>
          <!--暂无数据-->
          <tr v-if="!addFlag && paymentList.length === 0" class="ta-c pad15">
            <td colspan='14'>
              暂无数据
            </td>
          </tr>
          <!--编辑-->
          <tr v-else v-for="(item,index) in paymentList" :key="index">
            <td>{{index+1}}</td>
            <td v-if="editFlag && editIndex === index">
              <el-input type="text" :disabled="brandInputDisabled"  v-model="item.no" placeholder="请输入"></el-input>
            </td>
            <td v-else>{{item.no}}</td>
            <td v-if="editFlag && editIndex === index">
              <el-input type="text" v-model="item.name" placeholder="请输入"></el-input>
            </td>
            <td v-else>{{item.name}}</td>
            <td v-if="editFlag && editIndex === index">
              <el-select v-model="item.status" filterable remote reserve-keyword placeholder="请选择状态">
                <el-option key="1" label="正常" value="10"></el-option>
                <el-option key="2" label="禁用" value="40"></el-option>
              </el-select>
            </td>
            <td v-else>{{item.status | statusFilter}}</td>
            <td v-if="editFlag && editIndex === index">
              <el-button type="primary" @click="editFlag=false,editAddRow(index)">保存</el-button>
              <el-button type="primary" @click="editFlag=false">取消</el-button>
            </td>
            <td v-else>
              <el-button type="primary" :disabled="editBrandDisabled" @click="editFlag=true,editAddInfo(index)">编辑</el-button>
              <el-button type="primary" :disabled="editBrandDisabled" @click="disablesBtn(index)">禁用</el-button>
              <el-button type="primary" :disabled="editBrandDisabled" @click="enableBtn(index)">启用</el-button>
              <el-button type="primary" :disabled="editBrandDisabled" @click="editFlag=false,deleteAddInfo(index)">删除</el-button>
            </td>
          </tr>
          <!--新增-->
          <tr v-show="addFlag">
            <td>{{paymentList.length+1}}</td>
            <td>
              <el-input type="text" v-model="addObj.no" placeholder="请输入"></el-input>
            </td>
            <td>
              <el-input type="text" v-model="addObj.name" placeholder="请输入"></el-input>
            </td>
            <td>
              <el-select v-model="addObj.status" filterable remote reserve-keyword placeholder="请选择状态">
                <el-option key="1" label="正常" value="10"></el-option>
                <el-option key="2" label="禁用" value="40"></el-option>
              </el-select>
            </td>
            <td>
              <el-button type="primary" @click="addRow">保存</el-button>
              <!--<el-button type="primary" @click="addFlag=false,cancelRow">取消</el-button>-->
            </td>
          </tr>
        </table>
      </div>
      <!--按钮-->
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="handleClose">关闭</el-button>
        <el-button v-if="edit_main_title !== '查看'" type="primary" @click="confirmClick">提交</el-button>
      </el-row>
      <div style="height:20px"></div>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
  import * as CarDeployMgtAPI from '@/api/carDeploy'
  export default {
    name: '',
    components: {
    },
    props: ['edit_flag', 'edit_main_title', 'edit_select_row', 'edit_params'],
    data() {
      return {
        makeBrandData: {
          no: '',
          name: ''
        },
        makeBrandEditRules: {
          no: [{ required: true, message: '请输入', trigger: 'change' }],
          brandName: [{ required: true, message: '请选择', trigger: 'change' }],
          name: [{ required: true, message: '请输入', trigger: 'change' }]
        },
        makeBrandType: '', // 供应商 或 品牌商
        makeBrandTitle: '', // 供应商 或 品牌商
        makeEditFlag: true, // 显示 供应商 编辑面板
        brandTableFlag: true, // 显示品牌商table 编辑面板
        paymentList: [], // 品牌商列表数据
        addFlag: false, // 品牌商-新增
        editFlag: false, // 品牌商-编辑
        editIndex: -1,
        addObj: {
          no: '', // 编号
          status: '10', // 禁用 启用
          name: '' // 名称
        }, // 新增对象
        brandNameList: [], // 品牌列表
        editBrandDisabled: false, // 品牌商面板禁用
        makeInputDisabled: false, // 供应商-input 禁用
        brandInputDisabled: false, // 品牌商-input 禁用
        editMakeDisabled: false // 供应商面板禁用
      }
    },
    mounted() {
    },
    methods: {
      // 禁用
      disablesBtn(index2) {
        const that = this
        that.paymentList.map((item, index) => {
          if (index === index2) {
            item.status = '40'
          }
        })
      },
      // 启用
      enableBtn(index2) {
        const that = this
        that.paymentList.map((item, index) => {
          if (index === index2) {
            item.status = '10'
          }
        })
      },
      // 弹窗页打开初始
      handleOpenConfig(data) {
        const that = this
        console.log(that.$props.edit_main_title, 'that.$props', that.$props.edit_select_row, that.$props.edit_params)
        const { no, name, brandInfos } = that.$props.edit_select_row
        const { type } = that.$props.edit_params
        // 重置
        that.editBrandDisabled = false
        that.editMakeDisabled = false
        that.makeInputDisabled = false
        that.brandInputDisabled = false
        that.makeBrandData = {
          no: '',
          name: ''
        }
        that.makeEditFlag = true // 供应商面板 控制
        that.brandTableFlag = true // 品牌商面板 控制
        that.paymentList = []
        that.addFlag = true // 品牌商 新增模块
        that.editFlag = false // 品牌商 编辑模块
        that.editIndex = -1
        that.makeBrandTitle = ''
        that.resetAddObj()
        // 供应商 品牌商
        that.makeBrandType = type
        if (type === 'make') {
          that.makeBrandTitle = '供应商'
          that.makeEditFlag = true
          that.brandTableFlag = false
        } else if (type === 'brand') {
          that.makeBrandTitle = '品牌商'
          that.makeEditFlag = true
          that.brandTableFlag = true
        }
        // 查看 新增 编辑
        if (that.$props.edit_main_title === '新增') {
          //
        } else if (that.$props.edit_main_title === '编辑') {
          that.makeBrandData = {
            no: no,
            name: name
          }
          that.paymentList = brandInfos
          if (type === 'make') {
            that.editMakeDisabled = false
            that.makeInputDisabled = true
          } else if (type === 'brand') {
            that.editMakeDisabled = true
            that.brandInputDisabled = true
          }
        } else if (that.$props.edit_main_title === '查看') {
          that.makeBrandData = {
            no: no,
            name: name
          }
          that.paymentList = brandInfos
          that.addFlag = false
          that.editFlag = false
          that.editMakeDisabled = true
          that.editBrandDisabled = true
        }
        // console.log('editFlag', that.editFlag, 'addFlag', that.addFlag)
      },
      // 编辑
      editAddInfo(index) {
        this.editIndex = index
      },
      // 删除
      deleteAddInfo(index) {
        this.paymentList.splice(index, 1)
      },
      // 编辑-保存
      editAddRow(index) {
        this.editIndex = index
        this.addFlag = true
        this.editFlag = false
      },
      // 新增
      addClick() {
        this.resetAddObj()
      },
      // 保存
      addRow(index) {
        if (this.checkAddObj(this.addObj)) {
          this.paymentList.push(this.addObj)
          this.resetAddObj()
        }
      },
      // 取消
      cancelRow(index) {
        this.addFlag = false
      },
      // 重置 addObj
      resetAddObj() {
        this.addObj = {
          no: '', // 编号
          status: '10', // 禁用 启用
          name: '' // 名称
        }
      },
      confirmClick() {
        const that = this
        that.$refs['makeBrandEditFrom'].validate((valid) => {
          if (valid) {
            if (that.$props.edit_main_title === '新增') {
              if (that.makeBrandType === 'make') {
                CarDeployMgtAPI.makerAddMaker(that.makeBrandData).then(res => {
                  that.$message({
                    message: that.makeBrandTitle + '新增成功',
                    type: 'success',
                    duration: 2000
                  })
                  that.$emit('edit-confirm', false)
                }).catch(err => {
                  console.log('error', err)
                })
              }
            } else if (that.$props.edit_main_title === '编辑') {
              if (that.makeBrandType === 'make') {
                const toParams = {
                  id: that.$props.edit_select_row.id,
                  name: that.makeBrandData.name
                }
                CarDeployMgtAPI.makerUpdateById(toParams).then(res => {
                  that.$message({
                    message: that.makeBrandTitle + '编辑成功',
                    type: 'success',
                    duration: 2000
                  })
                  that.$emit('edit-confirm', false)
                }).catch(err => {
                  console.log('error', err)
                })
              } else if (that.makeBrandType === 'brand') {
                if (that.paymentList.length > 0) {
                  that.makeBrandData.brandInfos = that.paymentList
                  CarDeployMgtAPI.brandInfoBrandInfoUpdate(that.makeBrandData).then(res => {
                    that.$message({
                      message: that.makeBrandTitle + '编辑成功',
                      type: 'success',
                      duration: 2000
                    })
                    that.$emit('edit-confirm', false)
                  }).catch(err => {
                    console.log('error', err)
                  })
                } else {
                  this.$message({
                    message: '请先添加品牌商数据',
                    type: 'warning',
                    duration: 2000
                  })
                }
              }
            }
          }
        })
      },
      handleClose() {
        this.$emit('edit-close', false)
      },
      // 检查 addObj
      checkAddObj(obj) {
        const { no, name } = obj
        if (no === '') {
          this.$message({
            message: '请先填写(品牌商编号)',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        if (name === '') {
          this.$message({
            message: '请先填写(品牌商名称)',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        return true
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /*common*/
  tr.pad-t-b7>th{
    padding-top: 7px;
    padding-bottom: 7px;
  }
  /*<!--table-->*/
  .add-edit-table {
    border-collapse:collapse;
    width: 100%;
    overflow-x: scroll;
  }
  .add-edit-table th{
    color:#878d99
  }
  .add-edit-table th,td{
    border: 1px solid #e6ebf5;
    text-align: center;
  }
  .position-input{
    width: 80px;
  }
  .edit-table-header{
    border-left: 1px solid #e6ebf5;
    border-top: 1px solid #e6ebf5;
    border-right: 1px solid #e6ebf5;
    box-sizing: content-box;
    padding-left: 6px;
  }
  .edit-add-position{
    padding: 2px 10px;
    margin-left: 6px;
  }
  /*<!--去掉 input 上下箭头按钮-->*/
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
</style>



